<template>
	<view class="p-20">
		<image v-if="detail.images" :src="detail.images" mode="widthFix" style="width: 100%;"></image>
		<view class="questions">
			<view class="text-center font-g">{{detail.title}}</view>
			<view class="mt-20 font-grey font-24">{{detail.info}}</view>

			<view class="mt-40" v-for="(item, index) in questions" :key="index">
				<view class="" v-if="item.questionType === 'text'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="form-input mt-20">
						<input type="text" placeholder="请输入" v-model="form[item.id]" />
					</view>
				</view>
				<view class="" v-if="item.questionType === 'single_choice' || item.questionType === 'judgment'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-data-select v-model="form[item.id]"
							:localdata="rangeOptions(item.options)"></uni-data-select>
					</view>
				</view>
				<view class="" v-if="item.questionType === 'multiple_choice'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-data-checkbox multiple v-model="form[item.id]"
							:localdata="rangeOptions(item.options)"></uni-data-checkbox>
					</view>
				</view>
				<view class="" v-if="item.questionType === 'textarea'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-easyinput type="textarea" autoHeight v-model="form[item.id]"
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>

				<view class="" v-if="item.questionType === 'city_choice'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-data-select v-model="form[item.id]" :localdata="city_enum"></uni-data-select>
					</view>
				</view>
				<view class="" v-if="item.questionType === 'date_choice'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-datetime-picker type="date" v-model="form[item.id]" />
					</view>
				</view>
				<view class="" v-if="item.questionType === 'time_choice'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="form-input mt-20">
						<picker mode="time" :value="form[item.id]" start="00:00" end="23:59"
							@change="bindTimeChange($event, item.id)">
							<view class="uni-input">{{form[item.id] === '' ? '请选择时间' : form[item.id]}}</view>
						</picker>
					</view>
				</view>
				<view class="" v-if="item.questionType === 'datetime_choice'">
					<view class="font-bold font-24"><text class="font-red" v-if="item.isRequire">*</text>
						{{index + 1}}.{{item.title}}
					</view>
					<view class="mt-20">
						<uni-datetime-picker type="datetime" v-model="form[item.id]" />
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-view">
			<view class="bottom-btn font-white bg-g" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		questionnaire,
		queryById,
		addAnswer
	} from '../../api/papers';
	export default {
		data() {
			return {
				id: 0,
				form: {},
				questions: [],
				city_enum: [{
					text: '东营市',
					value: '东营市'
				}, {
					text: '东营区',
					value: '东营区'
				}, {
					text: '河口区',
					value: '河口区'
				}, {
					text: '垦利区',
					value: '垦利区'
				}, {
					text: '广饶县',
					value: '广饶县'
				}, {
					text: '利津县',
					value: '利津县'
				}],
				source: '小程序',
				detail: {}
			};
		},
		onLoad(options) {
			this.id = options.id
			if (options.source) {
				this.source = options.source
			}
			this.getDetail()
			this.getPaper()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/papers/details?id=' + this.id
			}
		},
		methods: {
			getPaper() {
				queryById({
					id: this.id
				}).then(res => {
					this.detail = res.result
				})
			},
			bindTimeChange: function(e, name) {
				this.form[name] = e.detail.value
			},
			rangeOptions(item) {
				let rangeOptions = JSON.parse(item)
				console.log(rangeOptions)
				const jsonOption = []
				for (let x in rangeOptions) {
					jsonOption.push({
						value: rangeOptions[x].val,
						text: rangeOptions[x].val,
					})
				}
				console.log('json', jsonOption)
				return jsonOption
			},
			getDetail() {
				questionnaire({
					id: this.id
				}).then((res) => {
					this.questions = res.result
					for (let x in this.questions) {
						this.form[this.questions[x].id] = ''
					}
				})
			},
			submit() {
				const _this = this
				this.$tips.showModal('是否提交当前问卷？', () => {
					// _this.$tips.showConfirmModal('提交成功', () => {
					// 	uni.navigateBack()
					// })
					const question = this.questions.filter((question) => {
						return this.form[question.id] === '' && question.isRequire === 1
					})
					if (question.length !== 0) {
						this.$tips.showConfirmModal('请填写所有必填项目', () => {})
					} else {
						// const zbAnswerLogList = _this.form.map((item, index) => {
						// 	return {
						// 		questionnaireQuestionsId: index,
						// 		reply: item
						// 	}
						// })
						let zbAnswerLogList = []
						for (let x in this.form) {
							zbAnswerLogList.push({
								questionnaireQuestionsId: x,
								reply: this.form[x].toString()
							})
						}
						addAnswer({
							questionnaireId: _this.detail.id,
							source: _this.source,
							zbAnswerLogList: zbAnswerLogList
						}).then(res => {
							_this.$tips.showConfirmModal('提交成功', () => {
								uni.navigateBack()
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
		padding-bottom: 200rpx;
	}

	.bottom-view {
		width: 100vw;
		padding: 40rpx 0;
		background-color: #fff;
		z-index: 99999;
		border-top: 1px solid #efefef;

		.bottom-btn {
			width: 80vw;
			margin: auto;
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
		}
	}

	.questions {
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.questions:after {
		position: absolute;
		left: 0;
		right: 0;
		top: -20px;
		content: '';
		height: 30px;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}

	.form-input {
		background-color: #F7F8FA;
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
	}
</style>